<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>注册</title>
    <meta name="keywords"  content="KEYWORDS..." />
    <meta name="description" content="DESCRIPTION..." />
    <meta name="author" content="DeathGhost" />
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name='apple-touch-fullscreen' content='yes'>
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="format-detection" content="telephone=no">
    <meta name="format-detection" content="address=no">
    <link rel="icon" href="/1/images/icon/favicon.ico" type="image/x-icon">
    <link rel="apple-touch-icon-precomposed" sizes="57x57" href="/1/images/icon/apple-touch-icon-57x57-precomposed.png">
    <link rel="apple-touch-icon-precomposed" sizes="120x120" href="/1/images/icon/apple-touch-icon-120x120-precomposed.png">
    <link rel="apple-touch-icon-precomposed" sizes="196x196" href="/1/images/icon/apple-touch-icon-196x196-precomposed.png">
    <meta name="viewport" content="initial-scale=1, width=device-width, maximum-scale=1, user-scalable=no">
    <link rel="stylesheet" type="text/css" href="/1/css/style.css" />
    <script src="/1/js/jquery.js"></script>
    <script src="/vendor/layer/layer.js"></script>
    <style>
        .get-code-btn{
            padding:10px 10px;
            background: #31bd80;
            border: none;
            font-size: .25rem;
            color: white;
            border-radius: 2px;
        }
    </style>
</head>
<body>
<!--header-->
<header>
 <a href="javascript:history.go(-1);" class="iconfont backIcon">&#60;</a>
 <h1>注册</h1>
</header>
<div style="height:1rem;"></div>
{{--<mark class="formMark">这里放电话做什么，请联系400-8200-5385</mark>--}}
<form action="" onsubmit="return false" id="data-form">
<ul class="formarea">
 <li>
  <label class="lit">手机号：</label>
  <input type="text" id="mobile" name="username" placeholder="手机号码" class="textbox" style="width:60%;"/>
  <button class="get-code-btn" type="button" id="get-code-btn" onclick="getCode()">获取验证码</button>
 </li>
    <li>
        <label class="lit">验证码：</label>
        <input type="text" name="code" placeholder="" class="textbox"/>
    </li>
 <li>
  <label class="lit">密码：</label>
  <input type="password" name="password" placeholder="至少是6位的字母数字组合" class="textbox"/>
 </li>
 <li>
  <label class="lit">确认密码：</label>
  <input type="password" name="rePassword" placeholder="确认密码" class="textbox"/>
 </li>
 <!--<li>
  <label class="lit">所在城市：</label>
  <select>
   <optgroup label="山东省">
    <option>德州市</option>
   </optgroup>
  </select>
 </li>
 <li>
  <label class="lit">餐馆名称：</label>
  <input type="text" placeholder="餐馆名称" class="textbox"/>
 </li>
 <li>
  <label class="lit">收货人：</label>
  <input type="text" placeholder="收件人真实姓名" class="textbox"/>
 </li>
 <li>
  <label class="lit">联系电话：</label>
  <input type="tel" placeholder="联系电话" class="textbox"/>
 </li>
 <li>
  <label class="lit">收货地址：</label>
  <input type="text" placeholder="区-街道-小区-门牌号" class="textbox"/>
 </li>-->
 <li class="liLink">
  {{--<a href="/1/article.html" class="fl">《用户协议》</a>--}}
  <a href="/login" class="fr">已有账号，去登录</a>
 </li>
 <li>
  <input type="button" value="立即注册" onclick="saveData()" />
 </li>
</ul>
</form>
<div style="height:1.2rem;"></div>
@include('home.1.footer')
<script>
    function saveData() {
        $.post('{{url('/register')}}', $('#data-form').serialize(), function (res) {
            if (res.status === 1) {
                layer.msg(res.info, {time: 1200}, function () {
                    location.href='/login';
                });
            } else {
                layer.msg(res.info, {time: 1200});
            }
        });
    }

    // 获取验证码
    function getCode() {
        var mobile = $('#mobile').val();
        if (/^1\d{10}$/.test(mobile) === false) {
            layer.msg('请填写正确的手机号', {time: 2000});
            return;
        }
        layer.load(1, {shade: [0.2,'#999']});
        $.post('{{url('home/home/sendSmsCode')}}', {mobile: mobile}, function (res) {
            layer.closeAll();

            // 倒计时
            var secondsLeft = 120;
            $('#get-code-btn').text(secondsLeft + 's后可重试').css({background: '#999'}).prop('disabled', true);
            var timeClock = setInterval(function () {
                secondsLeft--;
                if (secondsLeft <= 0) {
                    $('#get-code-btn').text('获取验证码').css({background: '#31bd80'}).prop('disabled', false);
                    clearInterval(timeClock);
                    return;
                }
                $('#get-code-btn').text(secondsLeft + 's后可重试');
            }, 1000);

            if (res.info === '该手机号已存在') {
                alert('该手机号已存在');
                location.href='/login';
            } else {
                layer.msg(res.info, {time: 2000});
            }
        });
    }
</script>

</body>
</html>
